<script lang="tsx">
import { defineComponent, computed, ref, useAttrs } from 'vue'
let key = 0
export default defineComponent({
  props: {
    data: {
      type: Array,
      required: true
    },
    columns: {
      type: Array,
      required: true
    }
  },
  setup (props, { expose }) {
    const attrs = useAttrs()

    const getTableColumn = (column:any) => {
      const {
        render,
        headerRender,
        children,
        ...data
      } = column
      // 处理自定义头部和自定义内容
      const slots:any = {}
      if (headerRender) {
        slots.header = headerRender
      }
      if (render) {
        slots.default = render
      }
      if (children) {
        slots.default = () => children.map(getTableColumn)
      }
      if (!column.prop && !column.type) {
        key += 1
      }
      const columnProps = { align: 'center', ...data }
      return (
        <el-table-column
          key={column.prop || column.type || key}
          {...columnProps}
          v-slots={slots}>
        </el-table-column>
      )
    }

    const tableColumns = computed(() => props.columns.map(getTableColumn))

    const tableRef = ref(null)

    expose({
      tableRef
    })

    return () => <el-table
                  ref={tableRef}
                  data={props.data}
                  {...attrs}>
                  {tableColumns.value}
                </el-table>
  }
})
</script>
